{% extends "../base.html" %}
{% block content %}
{% macro customInputView(Name,Title,Default,Note,Place,Placeholder,Unit,Type,Min,Max) %}
<tr>
	<td>
		<label translate>Name <sup>without space, only characters</sup></label>
		<input name="Name" value="{{Name}}" class="name" placeholder="Name eg. ResinPumpAmount" pattern="[A-Za-z]{3,30}">
		<br>
		<label translate>Title</label>
		<input name="Title" value="{{Title}}" placeholder="Title text">
	</td>
	<td>
		<label translate>Place</label>
		<select name="Place" class="form-control">
			<option value="0" {% if Place==0 %}selected{% endif %} translate>Setup</option>
			<option value="1" {% if Place==1 %}selected{% endif %} translate>Profile</option>
		</select>	
		<br>
		<label translate>Default Value</label>
		<input name="Default" value="{{Default}}" placeholder="Default Value">
	</td>
	<td>
		<label translate>Note Text</label>
		<input name="Note" value="{{Note}}" placeholder="Note text">
		<br>
		<label translate>Placeholder Text</label>
		<input name="Placeholder" value="{{Placeholder}}" placeholder="Placeholder text">
	</td>
	<td>
		<label translate>Value Type</label>
		<select name="Type" class="form-control">
			<option value="0" {% if Type==0 %}selected{% endif %} translate>Text</option>
			<option value="1" {% if Type==1 %}selected{% endif %} translate>Number</option>
			<option value="2" {% if Type==2 %}selected{% endif %} translate>Enable / Disable</option>
		</select>
		<br>
		<label translate>Unit Text</label>
		<input name="Unit" value="{{Unit}}" placeholder="Unit">
	</td>
	<td>
		<label translate>Min for Number Input</label>
		<input name="Min" value="{{Min}}" placeholder="Min" type="number">
		<br>
		<label translate>Max for Number Input</label>
		<input name="Max" value="{{Max}}" placeholder="Max" type="number">
	</td>
	<td class="action"><a href="#" class="up">&#x2B06;</a><br><a href="#" class="down">&#x2B07;</a><br><a href="#" class="remove">&#x2716;</a></td>
</tr>
{% endmacro %}
<div class="alert alert-success" role="alert" translate>You can add additional inputs to the setup page and they will be accessible as Gcode keywords. eg. [[_ResinPumpAmount]]</div>
<form action="/setup/custom-inputs" method="post" id="custom_inputs" class="edit-table edit-page">
	<div class="row">
		<div class="col-md-12">
			<table width="100%">
				<tr class="thead">
					<th translate>Name</th>
					<th translate>Details</th>
					<th translate>Details</th>
					<th translate>Details</th>
					<th translate>Action</th>
				</tr>
				{% if inputs %}
					{% for input in inputs %}
						{{ customInputView(input.Name,input.Title,input.Default,input.Note,input.Place,input.Placeholder,input.Unit,input.Type,input.Min,input.Max) }}
					{% endfor %}
				{% endif %}
				{{ customInputView("","","","","","","","","","") }}
			</table>
			<br>
			<button type="submit" class="btn btn-success" translate>Submit</button>
		</div>
	</div>
</form>
{% endblock %}
